<template>
  <div class="haibao_box">
    <!-- 推广的遮罩层 -->
    <!-- <mt-popup
      v-if="popupVisible"
      v-model="popupVisible"
      popup-transition="popup-fade"> -->
      <div class="tuiguang">
        <mt-navbar v-model="selected">
          <mt-tab-item id='1'>
            <div class="tab">
                <img :src="selected === '1' ? haibaiHover : haibao" class="icon">
                <span class="title">我的海报</span>
            </div>
          </mt-tab-item>
          <mt-tab-item id='2'>
              <div class="tab">
                  <img :src="selected === '2' ? lianjieHover : lianjie" class="icon">
                  <span class="title">推广链接</span>
              </div>
          </mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <div class="haibao_box">
              <p class="tj_p">推荐语</p>
              <div v-if="query.recommend_info.length>0" class="tj_div">
                <p>{{query.recommend_info}}</p>
                <span class="fz_button" @click="fzclick(query.recommend_info)">复制推荐语</span>
              </div>
              <p class="p1">长按海报保存后发送朋友圈、群或好友</p>
              <!-- canvas 海报 -->
              <div class="newhaobao" v-if="canvasswiperdata.length>0">
                <img class="left" :src="rightcircle" alt="" @click="defaultchange('jian')">
                <mt-swipe ref="swipe" :show-indicators="false" :auto="0" class="canvasswiper" :defaultIndex="defaultIndex">
                  <mt-swipe-item v-for="(obj, i) in canvasswiperdata" :key="i" class="canvasswiperitem">
                    <canvas-poster
                      class="img"
                      :imgUrl1="obj.imgUrl1"
                      :imgUrl2="obj.imgUrl2"
                      :imgUrl3="obj.imgUrl3"
                      :name="obj.name"
                      :desc="obj.desc"
                    />
                  </mt-swipe-item>
                </mt-swipe>
                <img class="right" :src="rightcircle" alt="" @click="defaultchange('add')">
              </div>
              <!-- <div class="footer_title">
                F+智选 提供系统支持，商务合作请联系 <span class="footer_right"></span>
              </div> -->
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <div class="tuiguang_box">
              <p class="tj_p">推荐语</p>
              <div v-if="query.recommend_info.length>0" class="tj_div">
                <p>{{query.recommend_info}}</p>
                <span class="fz_button" @click="fzclick(query.recommend_info)">复制推荐语</span>
              </div>
              <p class="p1">点击右上角按钮分享</p>
              <img class="img" src="../assets/share/wx.png" alt="">
              <div class="lianjie_box">
                <p>步骤1.点击微信 右上角按钮</p>
                <p>步骤2.分享至 好友、朋友圈</p>
                <p>步骤3.浏览越多 奖励越多</p>
              </div>
              <!-- <div class="footer_title mt490">
                F+智选 提供系统支持，商务合作请联系 <span class="footer_right"></span>
              </div> -->
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
      <!-- <img class="imgclose" src="../assets/share/close_radius.png" @click="close"/> -->
    <!-- </mt-popup> -->
  </div>
</template>
<script>
import haibaiHover from '../assets/share/haibao_hover.png'
import haibao from '../assets/share/haibao.png'
import rightcircle from '../assets/imgs/right-circle.png'
import lianjieHover from '../assets/share/lianjie_hover.png'
import lianjie from '../assets/share/lianjie.png'
import { getOneApp, getSharePoster } from 'api/home-api'
import Vue from 'vue'
import canvasPoster from 'common/canvas-poster'
export default {
  name: 'Haibao',
  components: {
    canvasPoster
  },
  data() {
    return {
      popupVisible: true,
      selected: '1', // 默认选中过的tab
      rightcircle,
      haibaiHover,
      haibao,
      lianjieHover,
      lianjie,
      defaultIndex: 0,
      obj: {
        poster: ''
      },
      poster: '', // 海报地址
      query: {
        title: '', // 分享的标题
        desc: '', // 分享的描述
        link: '', // 分享的链接
        imgUrl: '', // 分享卡片的图片
        recommend_info: ''
      },
      canvasswiperdata: [
        // {
        //   imgUrl1: 'https://ttbs.guangsuss.com/image/9c0c4d5a3d76288ed5716af1576884c0', // 背景图
        //   imgUrl2: 'https://ttbs.guangsuss.com/image/9c0c4d5a3d76288ed5716af1576884c0', // 头像
        //   imgUrl3: 'https://ttbs.guangsuss.com/image/9c0c4d5a3d76288ed5716af1576884c0', // 二维码
        //   name: 'obo', // 头像
        //   desc: '邀请你来'
        // }
      ]
    }
  },
  created() {
    this.getSharePoster()
    var user = JSON.parse(localStorage.getItem('user'))
    if (user['userquery'] && user['userquery'] !== -1) {
      if (user['userquery'].app_id === user['app_id']) {
        this.query = user['userquery']
        this.popupVisible = true
      }
    }
    if (user['userquery'] && user['userquery'] !== -1 && user['userquery'].recommend_info) {
      Vue.set(this.query, 'recommend_info', user['userquery'].recommend_info)
    }
  },
  mounted () {
    var user = JSON.parse(localStorage.getItem('user'))
    if (user['userquery'] && user['userquery'] !== -1) {
      if (user['userquery'].app_id === user['app_id']) {
        this.popupVisible = true
      } else {
        this.getOneApp()
      }
    } else {
      this.getOneApp()
    }
  },
  methods: {
    // 获取海报图
    // 获取用户的信息
    getOneApp () {
      var user = JSON.parse(localStorage.getItem('user'))
      user.userquery = -1
      localStorage.setItem('user', JSON.stringify(user))
      const datasrc = {
        app_id: user['app_id']
      }
      const { query } = this
      getOneApp(datasrc).then(data => {
        if (data.code === 0 && data.data !== null) {
          query.title = data.data.share_title
          query.desc = data.data.share_description
          query.imgUrl = data.data.share_img
          query.recommend_info = data.data.recommend_info
          Vue.set(this.query, 'recommend_info', data.data.recommend_info)
          query.link = data.data.domain + '?app_id=' + user['app_id'] + '&user_id=' + user['user_id'] + '&id=' + user['id']
          user.userquery = query
          localStorage.setItem('user', JSON.stringify(user))
        } else {
          this.$toast(data.info)
        }
        this.popupVisible = true
      }).catch(() => {
        this.popupVisible = true
      })
    },
    fzclick (value) {
      var _input = document.createElement('input') // 直接构建input
      _input.value = value // 设置内容
      document.body.appendChild(_input) // 添加临时实例
      _input.select() // 选择实例内容
      document.execCommand('Copy') // 执行复制
      document.body.removeChild(_input)// 删除临时实例
      this.$toast('复制成功')
    },
    // 关闭遮罩层
    close () {
      // this.popupVisible = false
      this.$emit('close')
    },
    // 请求海报的信息
    getSharePoster () {
      var user = JSON.parse(localStorage.getItem('user'))
      var param = { 'app_id': user['app_id'] }
      getSharePoster(param).then(data => {
        if (data.code === 0 && data.data !== null) {
          data.data.poster.map((item) => {
            this.canvasswiperdata.push({
              imgUrl1: item, // 背景图
              imgUrl2: data.data.headimgurl || '', // 头像
              imgUrl3: data.data.qrcode || '', // 二维码
              name: data.data.nickname || '', // 头像
              desc: data.data.desc
            })
          })
          console.log(this.canvasswiperdata)
          // console.log(data.data.icon) // 二维码icon
          // console.log(data.data.url) // 二维码url
          // console.log(data.data.poster) // 海报背景
          // console.log(data.data.desc) // 海报描述
          // console.log(data.data.nickname) // 昵称
          // console.log(data.data.headimgurl) // 头像
        }
      })
    },
    // 点击左右图片
    defaultchange (type) {
      if (type === 'add') {
        // this.defaultIndex++
        this.$refs.swipe.next()
      } else {
        // this.defaultIndex--
        this.$refs.swipe.prev()
      }
      // this.$refs.swipe.swipeItemCreated()
      console.log(this.defaultIndex)
    }
  }
}
</script>
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.haibao_box{
  background: #FFF;
  width: 100%;
  height: 100%;
  .tuiguang{
    width: 100%;
    background: #FFF;
    position: relative;
    .b-radius(12);
    color:rgba(248,63,67,1);
    .mint-navbar{
      color:rgba(248,63,67,1);
    }
    .mint-navbar {
      .h(100);
      .b-bottom(2, #E9E9E9);
      .mint-tab-item{
        padding: 0px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        .lh(100);
        .fs(32);
        color:rgba(248,63,67,1);

        .mint-tab-item-label{
            .lh(100);
            .fs(32);
        }
      }
    }
    .tab{
      display: flex;
      justify-content: center;
      align-items: center;
      .icon{
        .w(40);
        .h(40);
        display: block;
        .mr(4);
      }
    }
    .haibao_box{
      .w(580);
      margin: 0 auto;
      .mt(40);
      .tj_p{
        .h(44);
        .lh(44);
        .fs(32);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(39,39,39,1);
        text-align: left;
      }
      .tj_div{
        .h(168);
        background:rgba(249,249,249,1);
        .border-solid(2, #DAD8D8);
        .mt(20);
        p{
          .w(524);
          .h(80);
          .fs(28);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(70,70,70,1);
          .lh(40);
          text-align: left;
          margin: 0 auto;
          .mt(20);
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          display: box;
          overflow: hidden;
        }
        .fz_button{
          .pl(30);
          .pr(30);
          .pt(8);
          .pb(8);
          .mr(20);
          color: #FFF;
          text-align: right;
          background:linear-gradient(90deg,rgba(252,101,79,1) 0%,rgba(252,74,76,1) 100%);
          .b-radius(28);
          .fs(30);
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(255,255,255,1);
          float: right;
        }
      }
      .p1{
        .mt(40);
        height:21px;
        .h(42);
        .lh(42);
        .fs(30);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(39,39,39,1);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .img{
        // .w(380);
        // .h(486);
        width: 100%;
        .minh(716);
        .fs(0);
        display: block;
        // position: relative;
        // background-image: url();
        // background-color: hsla(0,0%,59%,.1);
        // background-repeat: no-repeat;
        // background-position: 50%;
        // overflow: hidden;
        // background-size: 40%;
        // .mt(40);
      }
    }
    .tuiguang_box{
      .w(580);
      margin: 0 auto;
      .mt(40);
      .tj_p{
        .h(44);
        .lh(44);
        .fs(32);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(39,39,39,1);
        text-align: left;
      }
      .tj_div{
        .h(168);
        background:rgba(249,249,249,1);
        .border-solid(2, #DAD8D8);
        .mt(20);
        p{
          .w(524);
          .h(80);
          .fs(28);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(70,70,70,1);
          .lh(40);
          text-align: left;
          margin: 0 auto;
          .mt(20);
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          display: box;
          overflow: hidden;
        }
        .fz_button{
          .pl(30);
          .pr(30);
          .pt(8);
          .pb(8);
          .mr(20);
          color: #FFF;
          text-align: right;
          background:linear-gradient(90deg,rgba(252,101,79,1) 0%,rgba(252,74,76,1) 100%);
          .b-radius(28);
          .fs(30);
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(255,255,255,1);
          float: right;
        }
      }
      .p1{
        .mt(80);
        height:21px;
        .h(42);
        .lh(42);
        .fs(30);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(39,39,39,1);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .img{
        .w(516);
        .h(90);
        .mt(80);
      }
      .lianjie_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .mt(20);
        p{
          width: 33.33%;
          .pl(20);
          .pr(20);
          .h(68);
          .fs(24);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(102,102,102,1);
          .lh(34);
        }
      }
    }
  }
  .imgclose{
    display: block;
    .w(64);
    .h(64);
    margin: 0 auto;
    .mt(40);
  }
  .footer_title{
    .h(40);
    .lh(40);
    .fs(28);
    .mt(46);
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #929292;
    .footer_right{
      .w(16);
      .h(16);
      .b-top(4, #929292);
      display: inline-block;
      .border-right-solid(4, #929292);
      transform: rotate(45deg);
    }
  }
  .mt490{
    .mt(490);
  }
  .newhaobao{
    .fs(0);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9.33333333rem;
    .canvasswiper{
      width: 5.06666667rem;
      height: 9.33333333rem;
      font-size: 0rem;
      display: block;
      position: relative;
      background-image: url();
      background-color: hsla(0, 0%, 59%, 0.1);
      background-repeat: no-repeat;
      background-position: 50%;
      overflow: hidden;
      background-size: 40%;
      margin-top: 0.53333333rem;
    }
    .mint-swipe-items-wrap{
      width: 100% !important;
      height: 100% !important;
    }
    .canvasswiperitem{
      width: 100%;
      height: 100%;
    }
    .right{
      .w(52);
      .h(52);
      .fs(0);
      .ml(52);
    }
    .left{
      .w(52);
      .h(52);
      .fs(0);
      .mr(52);
      transform: rotate(180deg);
    }
  }
}
</style>
